<template>
    <v-chip v-if="props.size == 'mini'" :variant="getColor('variant')" :color="getColor('color')" class="!h-[18px] !leading-[18px] !text-[10px] !pl-[6px] !pr-[6px]">
        <div class="whitespace-nowrap" :style="{
            color: getColor('text')
        }">{{ props.text }}</div>
    </v-chip>

    <v-chip v-if="props.size == 'small'" :variant="getColor('variant')" :color="getColor('color')" class="!h-[20px] !leading-[20px] !text-[12px] !pl-2 !pr-2">
        <div class="whitespace-nowrap" :style="{
            color: getColor('text')
        }">{{ props.text }}</div>
    </v-chip>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
    text: {
        type: String,
        default: ""
    },
    color: {
        type: String,
        default: ""
    },
    variant: {
        type: String,
        default: ""
    },
    size: {
        type: String,
        default: "mini"
    }
})
function getColor(key:string) {
    let obj = {
        color: "primary",
        variant: "flat",
        text: "#ffffff"
    };
    if (props.color == 'primary') {
        obj.color = "primary";
        obj.variant = "flat";
        obj.text = "#ffffff";
    }
    if (props.color == 'grey') {
        obj.color = "#BDBDBD";
        obj.variant = "flat";
        obj.text = "#ffffff";
    }
    if (props.color == 'yellow') {
        obj.color = "#F5C107";
        obj.variant = "flat";
        obj.text = "#ffffff";
    }
    if (props.color == 'green') {
        obj.color = "#12B282";
        obj.variant = "flat";
        obj.text = "#ffffff";
    }
    if (props.color == 'yellow-text') {
        obj.color = "#FFFCF0";
        obj.variant = "flat";
        obj.text = "#F5C107";
    }
    if (props.color == 'grey-text') {
        obj.color = "#F8F9FA";
        obj.variant = "flat";
        obj.text = "#8490AD";
    }
    if (props.color == 'gray-text') {
        obj.color = "#F2F2F3";
        obj.variant = "flat";
        obj.text = "#373E4E";
    }
    return obj[key] || props[key];
}
</script>

<style scoped></style>